import React from 'react'
import Son from './Son'
class App extends React.Component {
    constructor() {
        super()
        this.state = {
            theme: 0,
            btns: [
                { background: 'red' },
                { background: 'green' },
                { background: 'blue' },
            ]
        }
    }
    // data = '我是一个name'
    // name = { name: 'wad', age: 23, job: '找' }

    // 主题切换，父容器有3个按钮，红绿蓝
    // 不可以用className 要让所有的子组件都同意主题
    setTheme=(index)=>{
        this.setState({
            theme:index
        })
    }

    render() {
        const { theme, btns } = this.state
        return <div style={{...btns[theme],height:'100vh'}}>
            {
                btns.map((item,index) => {
                    return <button onClick={ ()=>this.setTheme(index) } key={item.background} style={
                        {
                            ...item,
                            margin: '10px 20px',
                            color: 'white',
                            border: 'none',
                            padding: '10px'
                        }
                    }>
                        {item.background}
                    </button>
                })
            }
            <Son {...btns[theme]}></Son>
        </div>
    }
}

export default App